/* global ol, ContextMenu */
var view = new ol.View({center: [0, 0], zoom: 4}),
    vectorLayer = new ol.layer.Vector({source: new ol.source.Vector()}),
    baseLayer = new ol.layer.Tile({source: new ol.source.OSM()}),
    map = new ol.Map({
        target: 'map',
        view: view,
        layers: [baseLayer, vectorLayer],
    });


var contextmenu_items = [
    {
        text: 'Center map here',
        classname: 'bold',
        icon: 'images/center.png',
        callback: center,
    },
    // {
    //     text: 'Some Actions',
    //     icon: 'images/view_list.png',
    //     items: [
    //         {
    //             text: 'Center map here',
    //             icon: 'images/center.png',
    //             callback: center,
    //         },
    //         {
    //             text: 'Add a Marker',
    //             icon: 'images/pin_drop.png',
    //             callback: marker,
    //         },
    //     ],
    // },
    {
        text: 'Add a Marker',
        icon: 'images/pin_drop.png',
        callback: marker,
    },
    '-', // this is a separator
];

var removeMarkerItem = {
    text: 'Remove this Marker',
    classname: 'marker',
    callback: removeMarker,
};

var contextmenu = new ContextMenu({
    width: 180,
    items: contextmenu_items,
});
map.addControl(contextmenu);

contextmenu.on('open', function (evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
        return ft;
    });
    if (feature && feature.get('type') === 'removable') {
        contextmenu.clear();
        removeMarkerItem.data = {
            marker: feature,
        };
        contextmenu.push(removeMarkerItem);
    } else {
        contextmenu.clear();
        contextmenu.extend(contextmenu_items);
        contextmenu.extend(contextmenu.getDefaultItems());
    }
});

map.on('pointermove', function (e) {
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);

    if (e.dragging) return;

    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

// from https://github.com/DmitryBaranovskiy/raphael
function elastic(t) {
    return (
        Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1
    );
}

/**
 * 定位到此处
 * @param obj：定位到obj
 */
function center(obj) {
    view.animate({
        duration: 700,
        easing: elastic,
        center: obj.coordinate,
    });
}

function removeMarker(obj) {
    vectorLayer.getSource().removeFeature(obj.data.marker);
}

/**
 * 添加标签
 * @param obj
 */
function marker(obj) {
    var coord4326 = ol.proj.transform(obj.coordinate, 'EPSG:3857', 'EPSG:4326'),
        template = 'Coordinate is ({x} | {y})',
        iconStyle = new ol.style.Style({
            image: new ol.style.Icon({scale: 0.6, src: 'images/pin_drop.png'}),
            text: new ol.style.Text({
                offsetY: 25,
                text: ol.coordinate.format(coord4326, template, 2),
                font: '15px Open Sans,sans-serif',
                fill: new ol.style.Fill({color: '#111'}),
                stroke: new ol.style.Stroke({color: '#eee', width: 2}),
            }),
        }),
        feature = new ol.Feature({
            type: 'removable',
            geometry: new ol.geom.Point(obj.coordinate),
        });

    feature.setStyle(iconStyle);
    vectorLayer.getSource().addFeature(feature);
}
